<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :xxl="8" v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <InforCard shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          <p style="display: inline-flex;align-items: baseline;">
            <CountTo :end="infor.count" :color="infor.color" count-class="count-style" />
            <span>{{ infor.unit }}</span>
          </p>
          <p>{{ infor.title }}</p>
        </InforCard>
      </i-col>
    </Row>
  </div>
</template>

<script>
import InforCard from './components/InforCard/InforCard';
import CountTo from './components/CountTo/CountTo';
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo
  },
  data() {
    return {
      inforCardData: [
        {
          title: '线路总数',
          icon: 'md-map',
          count: 32,
          unit: '条',
          color: '#2d8cf0'
        },
        {
          title: '已完成线路数',
          icon: 'md-checkmark-circle',
          count: 14,
          unit: '条',
          color: '#9A66E4'
        },
        {
          title: '总里程',
          icon: 'md-locate',
          count: 232,
          unit: '公里',
          color: '#19be6b'
        },
        {
          title: '已采集里程',
          icon: 'md-help-circle',
          count: 142,
          unit: '公里',
          color: '#ff9900'
        },
        {
          title: '兴趣点总数',
          icon: 'md-share',
          count: 657,
          color: '#ed3f14'
        },
        {
          title: '信息点分类总数',
          icon: 'md-chatbubbles',
          count: 12,
          color: '#E46CBB'
        }
      ]
    };
  },
  mounted() {
    //
  }
};
</script>

<style lang="less">
.count-style {
  font-size: 50px;
}
</style>
